<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/black.css">
    <title>Document</title>
    <style>
        #app{
            padding: 30px;
        }
        .tou {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .jbxx {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr 2fr;
            gap: 10px;
            font-size: 15px;
        }
        .gj{
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }
        h3{
            margin: 20px 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="tou">
            <button class="btn btn-small" style="background-color: orange;color: white;">编辑</button>
            <button class="btn btn-small" style="background-color: red;color: white;">删除</button>
            <button class="btn" style="background-color: greenyellow;color: white;">改为已提交</button>
            <button class="btn" style="background-color: #eee;color: black;">改为未提交</button>
            <button class="btn" style="background-color: gray;color: white;">变更负责人</button>
            <button class="btn btn-small" style="background-color: black;color: white;">锁定</button>
            <button class="btn btn-small" style="background-color: rgb(41, 161, 241);color: white;">解锁</button>
            <button class="btn" style="background-color: blue;color: white;">放入公海</button>
        </div>
        <h3>客户基本信息</h3>
        <div class="jbxx">
            <span>客户名称</span>
            <span>xxx</span>
            <span>负责人</span>
            <span>xxx</span>
            <span>客户来源</span>
            <span>xxx</span>
            <span>锁定状态</span>
            <span>未锁定</span>
            <span>网址</span>
            <span>xxx</span>
            <span>成交状态</span>
            <span>未成交</span>
            <span>地区</span>
            <span>xxx省xxx市xxx区</span>
            <span>联系电话</span>
            <span>xxx</span>
            <span>联系地址</span>
            <span>xxx</span>
            <span>下次联系时间</span>
            <span>xxx</span>
            <span>备注</span>
            <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
        </div>
        <h3>联系人</h3>
        <div class="lxr">
            <table class="table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>职务</th>
                        <th>电话</th>
                        <th>性别</th>
                        <th>电子邮箱</th>
                        <th>是否为决策人</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>是</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>是</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h3>写跟进</h3>
        <div>
            <div class="gj">
                <div class="item" style="width: 50%;">
                    <label for="" class="item-left">跟进时间</label>
                    <div class="item-right">
                        <input type="datetime-local" class="control" />
                    </div>
                </div>
                <div class="item" style="width: 30%;">
                    <label for="" class="item-left" style="width: 4em;">联系人</label>
                    <div class="item-right">
                        <select class="control" style="height: 34px;">
                            <option value="0"></option>
                        </select>
                    </div>
                </div>
                <div class="item" style="width: 30%;">
                    <label for="" class="item-left" style="width: 5em;">跟进方式</label>
                    <div class="item-right">
                        <select class="control" style="height: 34px;">
                            <option value="0"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left">跟进内容</label>
                <div class="item-right">
                    <textarea class="control"></textarea>
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left">下次联系时间</label>
                <div class="item-right">
                    <input type="datetime-local" class="control" />
                </div>
            </div>
        </div>
        <h3>跟进记录</h3>
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th>跟进时间</th>
                        <th>联系人</th>
                        <th>跟进方式</th>
                        <th>跟进记录</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxxxxxxxxxxx</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxxxxxxxxxxx</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxxxxxxxxxxx</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>